<template>
  <div class="divBox">
    <el-card class="box-card">
      <template v-slot:header>
        <div class="clearfix">
        <el-steps :active="currentTab" align-center finish-status="success">
          <el-step title="选择拼单商品" />
          <el-step title="填写基础信息" />
          <el-step title="修改商品详情" />
        </el-steps>
      </div>
      </template>
      
      <el-form
        ref="formValidate"
        v-loading="fullscreenLoading"
        class="formValidate mt20"
        :rules="ruleValidate"
        :model="formValidate"
        label-width="180px"
        @submit.prevent
      >
        <!-- 拼单商品-->
        <div v-show="currentTab === 0">
          <el-form-item label="选择商品：" prop="image">
            <div class="upLoadPicBox">
              <div v-if="formValidate.image" class="pictrue"><img :src="formValidate.image" /></div>
              <el-button
                type="primary"
                size="small"
                @click="changeGood"
                >选择</el-button
              >
            </div>
          </el-form-item>
        </div>
        <!-- 商品信息-->
        <div v-show="currentTab === 1">
          <el-row :gutter="24">
            <el-col :span="24">
              <el-form-item label="商品主图：" prop="image">
                <div class="upLoadPicBox" @click="modalPicTap('1')">
                  <div v-if="formValidate.image" class="pictrue"><img :src="formValidate.image" /></div>
                  <div v-else class="upLoad">
                    <i class="el-icon-camer cameraIconfont" />
                  </div>
                  a
                </div>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="商品轮播图：" prop="imagelist">
                <div class="acea-row">
                  <div
                    v-for="(item, index) in formValidate.imagelist"
                    :key="index"
                    class="pictrue"
                    draggable="true"
                    @dragstart="handleDragStart($event, item)"
                    @dragover.prevent="handleDragOver($event, item)"
                    @dragenter="handleDragEnter($event, item)"
                    @dragend="handleDragEnd($event, item)"
                  >
                    <img :src="item" />
                  </div>
                </div>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="拼单名称：" prop="title">
                <el-input
                  :disabled="formValidate.id > 0"
                  v-model="formValidate.title"
                  maxlength="249"
                  placeholder="请输入拼单名称"
                />
              </el-form-item>
            </el-col>
            <el-col v-bind="grid2">
              <el-form-item label="单位：" prop="unitName">
                <el-input
                  :disabled="true"
                  v-model="formValidate.unitName"
                  placeholder="请输入单位"
                  class="selWidthd"
                />
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="活动日期：" prop="timeVal">
                <el-date-picker
                  v-model="formValidate.timeVal"
                  type="daterange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  @change="onchangeTime"
                >
                </el-date-picker>
                <span>设置活动开启结束时间，用户可以在设置时间内发起参与拼单</span>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="拼单时效(单位 小时)：" prop="effectiveTime">
                <el-input-number
                  v-model="formValidate.effectiveTime"
                  :min="1"
                  :step="1"
                  step-strictly
                  placeholder="请输入拼单人数"
                  class="selWidthd mr20"
                />
                <span
                  >用户发起拼单后开始计时，超过时效时间，则系统判定拼单失败，自动发起退款</span
                >
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="拼单人数：" prop="people">
                <el-input-number
                  v-model="formValidate.people"
                  :min="2"
                  :step="1"
                  step-strictly
                  placeholder="请输入拼单人数"
                  class="selWidthd mr20"
                />
                <span>单次拼单需要参与的用户数</span>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="购买数量限制：" prop="num">
                <el-input-number
                  v-model="formValidate.num"
                  :min="1"
                  :step="1"
                  step-strictly
                  placeholder="请输入帮砍次数"
                  class="selWidthd mr20"
                />
                <span
                  >活动时间内每个用户参与拼单的次数限制</span
                >
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="单次购买数量限制：" prop="onceNum">
                <el-input-number
                  v-model="formValidate.onceNum"
                  :min="1"
                  :max="formValidate.num"
                  :step="1"
                  step-strictly
                  placeholder="请输入购买数量限制"
                  class="selWidthd mr20"
                />
                <span
                  >一次购买最大数量限制</span
                >
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="补齐人数：" prop="virtualRation">
                <el-input-number
                  v-model="formValidate.virtualRation"
                  :min="0"
                  :max="formValidate.people - 1"
                  :step="1"
                  step-strictly
                  placeholder="请输入补齐人数"
                  class="selWidthd mr20"
                />
                <span
                  >当用户参与拼单后，补齐人数可虚拟成团</span
                >
              </el-form-item>
            </el-col>
            <el-col v-bind="grid2">
              <el-form-item label="排序：" prop="sort">
                <el-input-number
                  v-model="formValidate.sort"
                  :max="9999"
                  placeholder="请输入排序"
                  class="selWidthd"
                />
              </el-form-item>
            </el-col>
            <el-col v-bind="grid2">
              <el-form-item label="运费模板：" prop="tempId">
                <div class="acea-row">
                  <el-select v-model="formValidate.tempId" placeholder="请选择" class="selWidthd">
                    <el-option v-for="item in shippingList" :key="item.id" :label="item.name" :value="item.id" />
                  </el-select>
                </div>
              </el-form-item>
            </el-col>
            <el-col v-bind="grid2">
              <el-form-item label="活动状态：" required>
                <el-radio-group v-model="formValidate.isShow" :disabled="$route.params.type">
                  <el-radio value="false" class="radio">关闭</el-radio>
                  <el-radio value="true">开启</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <!-- 规格表格-->
            <el-col :span="24">
              <el-form-item label="商品规格：" class="labeltop" required>
                <el-table
                  ref="multipleTable"
                  :data="ManyAttrValue"
                  tooltip-effect="dark"
                  style="width: 100%"
                  @selection-change="handleSelectionChange"
                >
                  <el-table-column
                    type="selection"
                    key="1"
                    v-if="formValidate.specType"
                    width="55"
                  >
                  </el-table-column>
                  <!-- <template v-if="manyTabDate && formValidate.specType">
                    <el-table-column
                      v-for="(item, iii) in manyTabDate"
                      :key="iii"
                      align="center"
                      :label="manyTabTit[iii].title"
                      min-width="80"
                    >
                      <template #default="{row}">
                        <span class="priceBox" v-text="row[iii]" />
                      </template>
                    </el-table-column>
                  </template> -->
                  <el-table-column
                    v-for="(item, iii) in attrValue"
                    :key="iii"
                    :label="formThead[iii].title"
                    align="center"
                    min-width="140"
                  >
                    <template #default="{row}">
                      <el-input-number
                        size="small"
                        v-if="formThead[iii].title === '拼单价'"
                        v-model="row[iii]"
                        :min="0"
                        :precision="2"
                        :step="0.1"
                        class="priceBox"
                      />
                      <el-input-number
                        size="small"
                        v-else-if="formThead[iii].title === '限量'"
                        v-model="row[iii]"
                        type="number"
                        :min="1"
                        :max="9999"
                        :step="1"
                        step-strictly
                        class="priceBox"
                      />
                      <span v-else v-text="row[iii]" class="priceBox" />
                    </template>
                  </el-table-column>
                </el-table>
              </el-form-item>
            </el-col>
          </el-row>
        </div>
        <!-- 商品详情-->
        <div v-show="currentTab === 2">
          <el-form-item label="商品详情：">
            <editor v-if="!$route.params.type"  v-model="formValidate.content" :min-height="150"/>
            <div v-else v-html="formValidate.content"></div>
          </el-form-item>
        </div>
        <el-form-item style="margin-top: 30px">
          <el-button
            v-show="(!$route.params.id && currentTab > 0) || ($route.params.id && currentTab === 2)"
            type="primary"
            class="submission"
            size="small"
            @click="handleSubmitUp"
            >上一步</el-button
          >
          <el-button
            v-show="currentTab == 0"
            type="primary"
            class="submission"
            size="small"
            @click="handleSubmitNest1('formValidate')"
            >下一步</el-button
          >
          <el-button
            v-show="currentTab == 1"
            type="primary"
            class="submission"
            size="small"
            @click="handleSubmitNest2('formValidate')"
            >下一步</el-button
          >
          <el-button
            v-show="currentTab === 2 && !$route.params.type"
            :loading="loading"
            type="primary"
            class="submission"
            size="small"
            @click="handleSubmit('formValidate')"
            >提交</el-button
          >
        </el-form-item>
      </el-form>
    </el-card>

    <el-dialog title="选择商品" v-model="tableDialogVisible" width="750px" :before-close="handleClose">
      <div class="container mt-1">
        <el-form inline size="small">
          <el-form-item label="商品分类：">
            <el-cascader
              v-model="tableFrom.cateId"
              :options="merCateList"
              :props="props"
              clearable
              class="selWidth mr20"
              @change="seachList()"
              size="small"
            />
          </el-form-item>
          <el-form-item label="商品搜索：">
            <el-input
              v-model="tableFrom.keywords"
              placeholder="请输入商品名称，关键字，商品ID"
              class="selWidth"
              size="small"
              clearable
            >
            <template #append>
                <el-button icon="el-icon-search" @click="seachList()" size="small" >查询</el-button>
              </template>
            </el-input>
          </el-form-item>
        </el-form>
      </div>
      <el-table
        :data="tableData.data"
        style="width: 100%"
        size="small"
        :highlight-current-row="true"
        :header-cell-style="{ fontWeight: 'bold' }"
      >
        <el-table-column prop="id" label="ID" min-width="80"/>
        <el-table-column label="商品图" min-width="120" >
          <template #default="{row}">
            <div class="demo-image__preview">
              <el-image
                style="width: 36px; height: 36px"
                :src="row.image"
                :preview-src-list="[row.image]"
              />
            </div>
          </template>
        </el-table-column>
        <el-table-column
          label="商品名称"
          prop="storeName"
          min-width="350"
          :show-overflow-tooltip="true"
        >
        </el-table-column>
        <el-table-column label="操作" min-width="120" fixed="right" align="center">
          <template #default="{row}">
            <el-button
              type="primary"
              size="small"
              @click="chooseHandle(row)"
              >确认</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
import { productLstApi,productDetailApi, categoryApi } from '@/api/shopping/store';
import { shippingTemplatesList } from '@/api/shopping/logistics';
import { combinationSaveApi, combinationUpdateApi, combinationInfoApi } from '@/api/shopping/marketing';
const defaultObj = {
  image: '',
  images: '',
  imagelist: [],
  title: '',
  num: 1,
  unitName: '',
  sort: 0,
  giveIntegral: 0,
  ficti: 0,
  isShow: false,
  tempId: '',
  attrValue: [
    {
      suk: '',
      image: '',
      price: 0,
      cost: 0,
      otPrice: 0,
      stock: 0,
      quota: 1,
      weight: 0,
      volume: 0,
      barCode: '',
    },
  ],
  attr: [],
  selectRule: '',
  content: '',
  specType: true,
  id: 0,
  productId: 0,
  startTime: '',
  stopTime: '',
  timeVal: [],
  effectiveTime: 0,
  people: 2,
  virtualRation: 0,
  
};
const objTitle = {
  suk: {
    title: '规格名称',
  },
  price: {
    title: '拼单价',
  },
  cost: {
    title: '成本价',
  },
  otPrice: {
    title: '原价',
  },
  stock: {
    title: '库存',
  },
  quota: {
    title: '限量',
  },
  barCode: {
    title: '商品编号',
  },
  weight: {
    title: '重量（KG）',
  },
  volume: {
    title: '体积(m³)',
  },
};
export default {
  name: 'creatSeckill',
  data() {
    return {
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() < new Date().setTime(new Date().getTime() - 3600 * 1000 * 24);
        },
      },
      props: {
        children: 'child',
        label: 'name',
        value: 'id',
        multiple: false,
        emitPath: false,
      },
      grid2: {
        xl: 8,
        lg: 10,
        md: 12,
        sm: 24,
        xs: 24,
      },
      currentTab: 0,
      formThead: Object.assign({}, objTitle),
      formValidate: Object.assign({}, defaultObj),
      loading: false,
      fullscreenLoading: false,
      merCateList: [], // 商户分类筛选
      shippingList: [], // 运费模板
      ruleValidate: {
        productId: [{ required: true, message: '请选择商品', trigger: 'change' }],
        title: [{ required: true, message: '请输入商品标题', trigger: 'blur' }],
        attrValue: [{ required: true, message: '请选择商品属相', trigger: 'change', type: 'array', }],
        num: [{ required: true, message: '请输入购买数量限制', trigger: 'blur' }],
        unitName: [{ required: true, message: '请输入单位', trigger: 'blur' }],
        tempId: [{ required: true, message: '请选择运费模板', trigger: 'change' }],
        image: [{ required: true, message: '请上传商品图', trigger: 'change' }],
        imagelist: [{ required: true, message: '请上传商品轮播图', type: 'array', trigger: 'change' }],
        specType: [{ required: true, message: '请选择商品规格', trigger: 'change' }],
        timeVal: [{ required: true, message: '请选择活动日期', trigger: 'change', type: 'array' }],
        virtualRation: [{ required: true, message: '请输入补齐人数', trigger: 'blur' }],
        onceNum: [{ required: true, message: '请输入单次购买数量限制', trigger: 'blur' }],
        people: [{ required: true, message: '请输入拼单人数', trigger: 'blur' }],
        effectiveTime: [{ required: true, message: '请输入拼单时效', trigger: 'blur' }],
      },
      manyTabDate: {},
      manyTabTit: {},
      attrInfo: {},
      tempRoute: {},
      multipleSelection: [],
      productId: 0,
      radio: '',
      ManyAttrValue: [Object.assign({}, defaultObj.attrValue[0])], // 多规格
      type: '',
      tableDialogVisible: false,
      listLoading: true,
      tableData: {
        data: [],
        total: 0,
      },
      tableFrom: {
        page: 1,
        limit: 9999,
        cateId: '',
        keywords: '',
        type: 1,
      },
    };
  },
  computed: {
    attrValue() {
      const obj = Object.assign({}, defaultObj.attrValue[0]);
      delete obj.image;
      return obj;
    },
  },
  created() {
    this.$watch('formValidate.attr', this.watCh);
    this.tempRoute = Object.assign({}, this.$route);
  },
  mounted() {
    this.formValidate.imagelist = [];
    if (this.$route.params.id) {
      this.getInfo();
      this.currentTab = 1;
    }
    this.getShippingList();
    this.getCategorySelect();
  },
  methods: {
    seachList() {
      this.tableFrom.page = 1;
      this.getProductLst();
    },
    handleSelectionChange(val) {
      val.map((item) => {
        item.checked = true;
      });
      this.multipleSelection = val;
    },
    watCh(val) {
      const tmp = {};
      const tmpTab = {};
      this.formValidate.attr.forEach((o, i) => {
        // tmp['value' + i] = { title: o.attrName }
        // tmpTab['value' + i] = ''
        tmp[o.attrName] = { title: o.attrName };
        tmpTab[o.attrName] = '';
      });
      this.manyTabTit = tmp;
      this.manyTabDate = tmpTab;
      this.formThead = Object.assign({}, this.formThead, tmp);
    },
    handleRemove(i) {
      this.formValidate.imagelist.splice(i, 1);
    },
    // 具体日期
    onchangeTime(e) {
      this.formValidate.timeVal = e;
      this.formValidate.startTime = e ? e[0] : '';
      this.formValidate.stopTime = e ? e[1] : '';
    },
    changeGood() {
      // this.getProductLst();
      this.tableDialogVisible = true;
    },
    chooseHandle(row) {

      let tempAttr = row.attr;
      tempAttr.forEach(function (attr) {
        attr.id = null;  
      })

      let tempAttrValue = row.attrValue;
      tempAttrValue.forEach(function (attrValue) {
        attrValue.id = null;  
      })

      this.formValidate.image = row.image;
      this.formValidate.imagelist = [];
      this.formValidate.imagelist.unshift(row.image);
      this.formValidate.productId = row.id;
      this.formValidate.title = row.storeName;
      this.formValidate.attr = tempAttr;
      this.formValidate.specType = true;
      this.formValidate.attrValue = tempAttrValue;
      this.formValidate.unitName = row.unitName;
      this.ManyAttrValue = tempAttrValue;
      this.productId = row.id;
      this.tableDialogVisible = false;
      this.tableData.data = [];
      this.tableData.total = 0;
    },
    handleClose() {
      this.tableDialogVisible = false;
      this.tableData.data = [];
      this.tableData.total = 0;
    },
    handleSubmitNest1() {
      if (!this.formValidate.image) {
        return ElMessage.warning('请选择商品！');
      } else {
        this.currentTab++;
        if (!this.$route.params.id) this.getProdect(this.productId);
      }
    },
    // 商品分类；
    getCategorySelect() {
      categoryApi({ status: 1, type: 1 })
        .then((res) => {
          this.merCateList = res.data;
        })
        .catch((res) => {
          ElMessage.error(res.message);
        });
    },
    //产品列表
    getProductLst() {
      this.listLoading = true;
      productLstApi(this.tableFrom)
        .then((res) => {
          this.tableData.data = res.data.list;
          this.tableData.total = res.data.total;
          this.listLoading = false;
        })
        .catch((res) => {
          this.listLoading = false;
          ElMessage.error(res.message);
        });
    },
    // 运费模板；
    getShippingList() {
      shippingTemplatesList(this.tempData).then((res) => {
        this.shippingList = res.data.list;
      });
    },
    // 运费模板
    addTem() {
      this.$refs.addTemplates.dialogVisible = true;
      this.$refs.addTemplates.getCityList();
    },
    // 商品详情
    getInfo() {
      if (!this.$route.params.id) {
        this.getProdect(this.productId);
      } else {
        this.getSekllProdect(this.$route.params.id);
      }
    },
    getProdect(id) {
      this.fullscreenLoading = true;
      productDetailApi(id)
        .then(async (res) => {
          this.formValidate = {
            image: this.$selfUtil.setDomain(res.data.image),
            imagelist: JSON.parse(res.data.sliderImage),
            title: res.data.storeName,
            quota: '',
            unitName: res.data.unitName,
            sort: res.data.sort,
            tempId: res.data.tempId,
            attr: res.data.attr,
            selectRule: res.data.selectRule,
            content: res.data.content,
            specType: res.data.specType,
            productId: res.data.id,
            giveIntegral: res.data.giveIntegral,
            ficti: res.data.ficti,
            startTime: res.data.startTime || '',
            stopTime: res.data.stopTime || '',
            timeVal: [],
            status: 0,
            isShow: false,
            num: 1,
            isHost: false,
            people: 2,
            onceNum: 1,
            virtualRation: '',
            effectiveTime: 0,
            isPostage: false,
          };
          res.data.attrValue.forEach((row) => {
              row.quota = row.stock;
            });
            this.$nextTick(() => {
              res.data.attrValue.forEach((row) => {
                row.image = this.$selfUtil.setDomain(row.image);
                this.$refs.multipleTable.toggleRowSelection(row, true);
                row.checked = true;
              });
            });
            this.ManyAttrValue = res.data.attrValue;
            this.multipleSelection = res.data.attrValue;
          this.fullscreenLoading = false;
        })
        .catch((res) => {
          this.fullscreenLoading = false;
        });
    },
    getSekllProdect(id) {
      this.fullscreenLoading = true;
      combinationInfoApi({ id: id })
        .then(async (res) => {
          this.formValidate = {
            image: this.$selfUtil.setDomain(res.data.image),
            imagelist: JSON.parse(res.data.sliderImage),
            title: res.data.title,
            unitName: res.data.unitName,
            sort: res.data.sort,
            tempId: res.data.tempId,
            attr: res.data.attr,
            selectRule: res.data.selectRule,
            content: res.data.content,
            specType: res.data.specType,
            productId: res.data.productId,
            giveIntegral: res.data.giveIntegral,
            ficti: res.data.ficti,
            // timeVal: res.startTimeStr && res.stopTimeStr ? [res.startTimeStr, res.stopTimeStr] : [],
            timeVal:
              res.data.startTime && res.data.stopTime
                ? [
                    res.data.startTime,
                    res.data.stopTime,
                  ]
                : [],
            status: res.data.status,
            isShow: res.data.isShow,
            num: res.data.num,
            isHost: res.data.isHost,
            people: res.data.people,
            onceNum: res.data.onceNum,
            virtualRation: res.data.virtualRation,
            effectiveTime: res.data.effectiveTime,
            isPostage: false,
            startTime: res.data.startTime || '',
            stopTime: res.data.stopTime || '',
            id: res.data.id,
          };
          this.ManyAttrValue = res.data.attrValue;
            this.$nextTick(() => {
              this.ManyAttrValue.forEach((item, index) => {
                item.image = this.$selfUtil.setDomain(item.image);
                item.attrValue = JSON.parse(item.attrValue);
                // for (let attrValueKey in item.attrValue) {
                //   item[attrValueKey] = item.attrValue[attrValueKey];
                // }
                if (item.id) {
                  item.price = item.price;
                  item.quota = item.quota;
                  this.$nextTick(() => {
                    this.$refs.multipleTable.toggleRowSelection(item, true);
                  });
                }
              });
            });
          this.fullscreenLoading = false;
        })
        .catch((res) => {
          this.fullscreenLoading = false;
        });
    },
    handleSubmitNest2(name) {
      this.$refs[name].validate((valid) => {
        if (valid) {
          if (this.formValidate.specType && this.multipleSelection.length === 0)
            return ElMessage.warning('请选择至少一个商品属性！');
          this.currentTab++;
        } else {
          return false;
        }
      });
    },
    // 提交
    handleSubmit(name) {
      this.formValidate.attrValue = this.ManyAttrValue;
      this.formValidate.images = JSON.stringify(this.formValidate.imagelist);
      this.formValidate.startTime = this.formValidate.timeVal[0];
      this.formValidate.stopTime = this.formValidate.timeVal[1];
      this.$refs[name].validate((valid) => {
        if (valid) {
          this.fullscreenLoading = true;
          this.loading = true;
          this.$route.params.id
            ? combinationUpdateApi({ id: this.$route.params.id }, this.formValidate)
                .then(async () => {
                  this.fullscreenLoading = false;
                  ElMessage.success('编辑成功');
                  this.$router.push({
                    path: '/shoppingMarketing/shoppingMarketingGroupBuy/shoppingMarketingGroupBuyGroupGoodsList',
                  });
                  this.$refs[name].resetFields();
                  this.formValidate.imagelist = [];
                  this.loading = false;
                })
                .catch(() => {
                  this.fullscreenLoading = false;
                  this.loading = false;
                })
            : combinationSaveApi(this.formValidate)
                .then(async (res) => {
                  this.fullscreenLoading = false;
                  ElMessage.success('新增成功');
                  this.$router.push({
                    path: '/shoppingMarketing/shoppingMarketingGroupBuy/shoppingMarketingGroupBuyGroupGoodsList',
                  });
                  this.$refs[name].resetFields();
                  this.formValidate.imagelist = [];
                  this.loading = false;
                })
                .catch(() => {
                  this.fullscreenLoading = false;
                  this.loading = false;
                });
        } else {
          if (
            !this.formValidate.storeName ||
            !this.formValidate.unitName ||
            !this.formValidate.store_info ||
            !this.formValidate.image ||
            !this.formValidate.images
          ) {
            ElMessage.warning('请填写完整商品信息！');
          }
        }
      });
    },
    handleSubmitUp() {
      if (this.currentTab-- < 0) this.currentTab = 0;
    },
    // 移动
    handleDragStart(e, item) {
      this.dragging = item;
    },
    handleDragEnd(e, item) {
      this.dragging = null;
    },
    handleDragOver(e) {
      e.dataTransfer.dropEffect = 'move';
    },
    handleDragEnter(e, item) {
      e.dataTransfer.effectAllowed = 'move';
      if (item === this.dragging) {
        return;
      }
      const newItems = [...this.formValidate.imagelist];
      const src = newItems.indexOf(this.dragging);
      const dst = newItems.indexOf(item);
      newItems.splice(dst, 0, ...newItems.splice(src, 1));
      this.formValidate.imagelist = newItems;
    },
  },
};
</script>

<style scoped lang="scss">
.inpBox {
  ::v-deepel-form-item__error {
    color: #ff4949;
    font-size: 12px;
    line-height: 20px;
    padding-top: 4px;
    position: static !important;
    /* position: absolute; */
    /* top: 100%; */
    /* left: 0; */
  }
}
.labeltop {
  ::v-deepel-input-number--small {
    /*width: 172px !important;*/
    min-width: 132px !important;
  }
}

.proCoupon {
  ::v-deepel-form-item__content {
    margin-top: 5px;
  }
}
.tabPic {
  width: 40px !important;
  height: 40px !important;
  img {
    width: 100%;
    height: 100%;
  }
}
.noLeft {
  ::v-deepel-form-item__content {
    margin-left: 0 !important;
  }
}
.tabNumWidth {
  ::v-deepel-input-number--medium {
    width: 121px !important;
  }
  ::v-deepel-input-number__increase {
    width: 20px !important;
    font-size: 12px !important;
  }
  ::v-deepel-input-number__decrease {
    width: 20px !important;
    font-size: 12px !important;
  }
  ::v-deepel-input-number--medium .el-input__inner {
    padding-left: 25px !important;
    padding-right: 25px !important;
  }
  :deep( thead) {
    line-height: normal !important;
  }
  :deep( .el-table .cell) {
    line-height: normal !important;
  }
}
.selWidth {
  width: 80%;
}
.selWidthd {
  width: 350px;
}
.button-new-tag {
  height: 28px;
  line-height: 26px;
  padding-top: 0;
  padding-bottom: 0;
}
.input-new-tag {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}
.pictrue {
  width: 60px;
  height: 60px;
  border: 1px dotted rgba(0, 0, 0, 0.1);
  margin-right: 10px;
  position: relative;
  cursor: pointer;
  img {
    width: 100%;
    height: 100%;
  }
}
.btndel {
  position: absolute;
  z-index: 1;
  width: 20px !important;
  height: 20px !important;
  left: 46px;
  top: -4px;
}
.labeltop {
  ::v-deepel-form-item__label {
    /*float: none !important;*/
    /*display: inline-block !important;*/
    /*margin-left: 120px !important;*/
    /*width: auto !important;*/
  }
}
</style>
